<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css"/>
        <!-- 图标 -->
        <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.css">
        <link rel="stylesheet" th:href="@{/css/common.css}" href="../static/css/common.css">
        <title>用户注册</title>
        <style>
            body {
                font-family: sans-serif;
                background-image: url("/img/im_bg.jpg");
                background-position: center;
                background-size: cover;
            }

            .form-register {
                width: 550px;
                background-color: #fff;
                padding: 15px 40px 50px;
                border: 1px solid #e5e5e5;
                border-radius: 10px;
                margin: 8% auto 0;
            }

            .form-register .form-signin-heading {
                margin-bottom: 30px;
            }

            .form-register input, .form-register {
                margin-bottom: 10px;
            }

            .form-register .form-control {
                padding: 10px;
            }

            img {
                width: 80px;
                margin-top: -80px;
            }

            .captcha {
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="mx-auto">
                    <div id="registerForm" class="form-register shadow">
                        <h2 class="form-signin-heading text-center text-primary"><i class="fas fa-user"></i> 新用户注册
                        </h2>
                        <div class="form-group row">
                            <label for="userNickName" class="col-form-label col-sm-3">用户名</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="userNickName" name="userNickName"
                                       placeholder="请输入用户名(昵称)">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="userRealName" class="col-form-label col-sm-3">姓名</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="userRealName" name="userRealName"
                                       placeholder="请输入真实姓名">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="userIdCard" class="col-form-label col-sm-3">身份证号</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="userIdCard" name="userIdCard"
                                       placeholder="请输入身份证号">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="userPhone" class="col-form-label col-sm-3">手机号</label>
                            <div class="col-sm-9">
                                <input type="tel" class="form-control" id="userPhone" name="userPhone"
                                       placeholder="请输入手机号码">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="userEmail" class="col-form-label col-sm-3">Email</label>
                            <div class="col-sm-9">
                                <input type="email" class="form-control" id="userEmail" name="userEmail"
                                       placeholder="请输入邮箱 Email">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="userSex" class="col-form-label col-sm-3">性别</label>
                            <div class="col-sm-9">
                                <input type="radio" id="userSex" class="mt-2" name="userSex" value="1" checked
                                       style="width: 15px; height: 15px"> 男
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <input type="radio" name="userSex" class="mt-2" value="0"
                                       style="width: 15px; height: 15px"> 女
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="userBirth" class="col-form-label col-sm-3">出生日期</label>
                            <div class="col-sm-9">
                                <input type="date" class="form-control" id="userBirth" name="userBirth"
                                       placeholder="请输入出生日期(格式yyyy-MM-dd)">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="userPassword" class="col-form-label col-sm-3">密码</label>
                            <div class="col-sm-9">
                                <input type="password" class="form-control" id="userPassword" name="userPassword"
                                       placeholder="请输入密码">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="passwordVerify" class="col-form-label col-sm-3">确认密码</label>
                            <div class="col-sm-9">
                                <input type="password" class="form-control" id="passwordVerify" placeholder="请再次输入密码">
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="captchaCode" class="col-form-label col-sm-3">验证码</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" id="captchaCode" placeholder="请输入验证码">
                            </div>
                            <div class="col-sm-4">
                                <img id="captcha" th:src="@{/captcha/generate}" src="../static/img/im_bg.jpg"
                                     alt="captcha" width="100px" height="38px" class="captcha"
                                     onclick="changeCheckCode()">
                                <a id="captchaRefresh" href="javascript:void(0)"
                                   class="btn btn-link text-decoration-none" onclick="changeCheckCode()">
                                    <i class="fas fa-sync"></i>
                                </a>
                            </div>
                        </div>
                        <button id="register-btn" onclick="doRegister()" class="btn btn-lg btn-primary btn-block">
                            注册
                        </button>
                        <div class="text-center">
                            <a href="#" th:href="@{/user/login}"
                               class="btn btn-link text-decoration-none">已有帐号，去登录</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src='https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js'></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
        <script th:src="@{/js/bootstrapQ.js}" src='../static/js/bootstrapQ.js'></script>
        <script th:inline="javascript">
            // 用户注册
            function doRegister() {
                let req = {};
                let user = {};
                user.userNickName = $('#userNickName').val().trim();
                user.userRealName = $('#userRealName').val().trim();
                user.userIdCard = $('#userIdCard').val().trim();
                user.userPhone = $('#userPhone').val().trim();
                user.userEmail = $('#userEmail').val().trim();
                user.userSex = $('#userSex').val().trim();
                user.userBirth = $('#userBirth').val().trim();
                user.userPassword = $('#userPassword').val().trim();
                let captchaCode = $('#captchaCode').val().trim();
                req.user = user;
                req.captchaCode = captchaCode;
                let passwordVerify = $('#passwordVerify').val().trim();

                if (req.user.userNickName === '') {
                    bootstrapQ.msg({msg: '请输入用户名', type: 'warning', time: 3000});
                    return;
                }

                if (req.user.userPassword === '') {
                    bootstrapQ.msg({msg: '请输入密码', type: 'warning', time: 3000});
                    return;
                }

                if (passwordVerify !== req.user.userPassword) {
                    bootstrapQ.msg({msg: '俩次密码不相同', type: 'warning', time: 3000});
                    $('#passwordVerify').val('');
                    return;
                }

                $.ajax({
                    url: /*[[@{/user/register.do}]]*/'',
                    method: 'POST',
                    data: JSON.stringify(req),
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    processData: false,
                    success: (response) => {
                        if (response.success) {
                            location.href = /*[[@{/user/login}]]*/'';
                        } else {
                            bootstrapQ.msg({msg: response.message, type: 'warning', time: 3000});
                            $('#captchaCode').val('');
                            changeCheckCode();
                        }
                    },
                    error: (error) => {
                        bootstrapQ.msg({msg: '网络异常 => ' + error, type: 'danger', time: 3000});
                    }
                });
            }

            // 刷新验证码
            function changeCheckCode() {
                let e = document.getElementById("captcha");
                e.src = '/captcha/generate?' + new Date().getTime();
                document.getElementById("captchaCode").innerHTML = ''; // 清空
            }
        </script>
    </body>
</html>